<template>
    <el-table :data="ordlist" height="600px" style="width: 100%">
        <el-table-column label="序号" width="80" type="index" />
        <el-table-column prop="patientName" label="姓名" width="100" />
        <el-table-column prop="doctorName" label="医生姓名" width="100" />
        <el-table-column prop="invoiceDate" label="账单日期" width="180" />
        <el-table-column prop="amount" label="金额" width="100">
            <template #default="scope">
                <span v-if="scope.row.amount == null">-￥</span>
                <span v-else>{{ scope.row.amount }}￥</span>
            </template>
        </el-table-column>
        <el-table-column label="进度" prop="payStatus">
            <template #default="scope">
                <el-steps style="width: 600px" :space="200" finish-status="success" :active="scope.row.payStatus">
                    <el-step status="finish" title="待支付" />
                    <el-step status="success" v-if="scope.row.payStatus == 1" title="已完成" />
                    <el-step status="error" v-else-if="scope.row.payStatus == 2"  title="已取消" />
                    <el-step v-else title="待完成" />
                </el-steps>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
            <template #default="scope">
                <el-button type="primary" @click="showdetails(scope.row.medicineList)">查看详情</el-button>
                <el-button type="success" v-if="scope.row.payStatus != 2" :disabled="scope.row.payStatus == 1" @click="topay(scope.row.id)">支付</el-button>
                <el-button type="warning" v-else @click="topay(scope.row.id)">重新支付</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog v-model="isshow" title="订单详情" width="500">
        <el-table :data="medlist">
            <el-table-column property="name" label="名称" width="150" />
            <el-table-column property="quantity" label="数量" width="200" />
            <el-table-column property="unitPrice" label="价格" />
        </el-table>
    </el-dialog>
</template>

<script>
import { orderlist, orderpay } from '@/views/api';
import { ElMessage, ElMessageBox,ElLoading } from 'element-plus';
import { ref } from 'vue'

export default {
    data() {
        return {
            ordlist: [],
            isshow: ref(false),
            medlist: []
        }
    },
    methods: {
        showdetails(item) {
            this.isshow = true;
            this.medlist = item
        },
        topay(item) {
           const loading = ElLoading.service({
                lock: true,
                text: 'Loading',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            orderpay({ id: item }).then(res => {
                if (res.data.success) {
                    loading.close();
                    ElMessage({
                        message: res.data.data,
                        type: 'success'
                    });
                    setTimeout(2000)
                    location.reload();
                } else {
                    loading.close();
                    ElMessage({
                        message: res.data.data,
                        type: 'error'
                    });
                    setTimeout(2000)
                    location.reload();
                }
            })
        }
    },
    mounted() {
        orderlist().then(res => {
            this.ordlist = res.data.data
        })
    }
}
</script>

<style></style>